import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { ChangeEventComponent } from './change-event/change-event.component';
import { CustomizeHeaderComponent } from './customize-header/customize-header.component';
import { CustomizeTabComponent } from './customize-tab/customize-tab.component';
import { TabBarExtraComponent } from './tab-bar-extra/tab-bar-extra.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo6Component } from './demo6/demo6.component';
import { CardComponent } from './card/card.component';
import { SlideComponent } from './slide/slide.component';

export const TabsConfig: CaseConfigType = {
  location: 'Tabs',
  description: `页签，又称标签页或选项卡，是一种将相关信息按标签页进行分类展示的方法。Tab页签可以使用户在有限的空间里展示更多的信息，把同一维度的信息放置在一起，提升页面易读性。
	Tab页签的应用也可以缩短页面屏长，降低信息的显示密度，同时又不牺牲信息量。
  默认使用：横排一级页签。当Tab内容里需再嵌套一层Tab时，使用横排二级页签。
  `,
  description_en: `A tab, also called as tab page, is a method of classifying and displaying related information by tab pages.
	Tab enables users to display more information in a limited space, put information of the same dimension together, and improve the readability of the page.
	The application of tab can also shorten the screen's length of the page and reduce the display density of information, without sacrificing the amount of information.
	Note: Default to use horizontal level 1 tabs. When another level of tab needs to be nested in the tab content, use horizontal level 2 tabs.
	`,
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/tabs/basic/basic.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '提供四种样式的页签，根据使用场景选择。',
      demoDescription_en: 'Four styles of tabs are provided. Users can select which to use according to the scenario.',
    },
    {
      demo: CustomizeHeaderComponent,
      codePath: 'showcase/tabs/customize-header/customize-header.component',
      demoTitle: '自定义header',
      demoTitle_en: 'Customize header',
      demoDescription: '页签 Tab 的标题可为字符串，也可自定义，如：添加图标前缀等。',
      demoDescription_en: 'The title of a tab can be a string or be customised, such as adding an icon prefix.',
    },
    {
      demo: CustomizeTabComponent,
      codePath: 'showcase/tabs/customize-tab/customize-tab.component',
      demoTitle: '自定义class',
      demoTitle_en: 'Customize tab class',
      demoDescription: '页签可添加自定义class',
      demoDescription_en: 'Custom class can be added on the tab.',
    },
    {
      demo: SlideComponent,
      codePath: 'showcase/tabs/slide/slide.component',
      demoTitle: '滑动',
      demoTitle_en: 'slips',
      demoDescription: '页签数量过多，采用滑动方式显示',
      demoDescription_en: 'Too many tabs are displayed in sliding mode.',
    },
    {
      demo: TabBarExtraComponent,
      codePath: 'showcase/tabs/tab-bar-extra/tab-bar-extra.component',
      demoTitle: '内容扩展',
      demoTitle_en: 'Content Extension',
      demoDescription: '页签右侧进行内容扩展，如：自定义动态添加页签。',
      demoDescription_en:
        'Expand the content on the right side of the tab, such as adding a tab dynamically by customisation.',
      devDebug: true,
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/tabs/demo4/demo4.component',
      demoTitle: '懒加载',
      demoTitle_en: 'Lazy Loading',
      demoDescription: '页签内容的懒加载。',
      demoDescription_en: 'Lazy loading of the text content.',
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/tabs/demo6/demo6.component',
      demoTitle: '步骤式页签',
      demoTitle_en: 'Step Tabs',
      demoDescription: '页签选项有顺序和条件限制。',
      demoDescription_en: 'Tab options are limited by order and condition.',
      devDebug: true,
    },
    {
      demo: CardComponent,
      codePath: 'showcase/tabs/card/card.component',
      demoTitle: '卡片式页签/自定义下拉面板',
      demoTitle_en: 'Card Tabs',
      demoDescription: '使用场景主要是应用于页面顶部，作为本模块第一级内容切换，与容器卡片相连。',
      demoDescription_en:
        'The usage scenario is mainly applied to the top of the page as the first-level content switch of the module, which is connected to the container card.',
    },
    {
      demo: ChangeEventComponent,
      codePath: 'showcase/tabs/change-event/change-event.component',
      demoTitle: 'Change事件',
      demoTitle_en: 'Change Event',
      demoDescription: '页签切换前后的事件处理。不推荐修改原选中项 originTab 的 lvTitle 属性。',
      demoDescription_en:
        'Event handling before and after tab switching. You are not advised to modify the lvTitle attribute of originTab.',
    },
  ],
  selector: 'lv-tabs',
  snippet: `
    <lv-tabs [lvSize]="\${1:large}" [lvActiveIndex]="0">
      <lv-tab [lvTitle]="\${2:Tab 001}"></lv-tab>
      <lv-tab [lvTitle]="\${3:Tab 002}"></lv-tab>
    </lv-tabs>
    `,
  mApi: [
    {
      name: 'lv-tabs',
      name_en: 'lv-tabs',
      selector: 'lv-tabs',
      api: [
        {
          attribute: 'lvType',
          type: 'string',
          default: 'default',
          description: "[lv-tabs 属性] 页签的类型，可选值： 'default' | 'card' | 'panel' | 'underline'。",
          description_en: "Type of [lv-tabs attribute] tabs. Optional value： 'default' | 'card' | 'underline'.",
        },
        {
          attribute: 'lvSize 【废弃】',
          type: 'string',
          default: 'default',
          description: "[lv-tabs 属性] 页签的大小，可选值： 'default'。",
          description_en: "Size of [lv-tabs attribute] tabs. Optional value: 'default'.",
        },
        {
          attribute: 'lvActiveIndex',
          type: 'number | string',
          default: '0',
          description:
            '[lv-tabs 属性] 页签当前选中项。优先匹配 tab 的 lvId，未配置 lvId 且为 number 类型时，则匹配 tab 的索引值。',
          description_en:
            'Currently checked items in [lv-tabs attribute] tabs. First match the lvId of the tab. If lvId is not configured and of type Number, match the index of the tab.',
        },
        {
          attribute: 'lvClosable',
          type: 'boolean',
          default: 'false',
          description: '[lv-tabs 属性] 页签是否可关闭，当页签项同时配置时，以页签项配置为准。',
          description_en:
            'Whether [lv-tabs attribute] tabs can be closed. When tab items are configured at the same time, the configuration of tab item prevails.',
        },
        {
          attribute: 'lvTabBarExtraContent',
          type: 'templateRef',
          default: 'null',
          description: '[lv-tabs 属性] 页签右侧的扩展内容，为 null 时不显示。',
          description_en:
            'Extended content on the right side of [lv-tabs attribute] tabs, which is hided when the value is null.',
        },
        {
          attribute: 'lvTabDropdownContent',
          type: 'templateRef',
          default: 'null',
          description: '[lv-tabs 属性] 下拉面板内容，为 null 时不显示。',
          description_en: 'Drop-down Panel Content of [lv-tabs attribute] tabs, which is hided when the value is null.',
        },
        {
          attribute: 'lvBeforeChange',
          type: 'fn',
          default: '--',
          description:
            '[lv-tabs 属性] 页签选中状态切换前的回调函数，支持可执行函数、Promise、Observe，返回值为false可阻止切换。参数: (originTab, activeTab), originTab 为原选中项，activeTab 为新选中项。',
          description_en: `Callback function before the status of [lv-tabs attribute] tabs switching. Supports executable functions, Promise and Observe. If the returned value is false, closing can be prevented.
          Parameters: (originTab, activeTab), while originTab is the originally selected item, and activeTab is the newly selected item.`,
        },
        {
          attribute: 'lvAfterChange',
          type: 'fn',
          default: '--',
          description:
            '[lv-tabs 属性] 页签选中状态切换后的回调函数，不需要返回值。参数: (originTab, activeTab), originTab 为原选中项，activeTab 为新选中项。',
          description_en: `Callback function after [lv-tabs attribute] tabs switching, which does not require to return value.
          Parameters: (originTab, activeTab), while originTab is the originally selected item, and activeTab is the newly selected item.`,
        },
      ],
      event: [
        {
          event: 'lvTabRemove',
          parameter: '',
          description: '删除页签项的回调。参数为删除项的 tab 实例。',
          description_en: 'Callback to delete a tab item. The parameter is the tab instance of the deleted item.',
        },
        {
          event: 'lvActiveIndexChange',
          parameter: '',
          description: '页签选中项变更时的回调。参数为选中项的lvId，如未配置 lvId 则返回索引 index。',
          description_en: 'Callback when the tab selection is changed. Parameter is lvId or index of the selected tab.',
        },
      ],
    },
    {
      name: 'lv-tab',
      name_en: 'lv-tab',
      selector: 'lv-tab',
      api: [
        {
          attribute: 'lvTitle',
          type: 'string | templateRef',
          default: 'null',
          description: '页签项的内容，可以是一个字符串或自定义模板。',
          description_en: 'Content of tab items, which can be a string or a template.',
        },
        {
          attribute: 'lvDropdownLabel',
          type: 'string | templateRef',
          default: 'null',
          description: '页签项的标签名，可以是一个字符串或自定义模板，传入后折叠面板内将显示此标签名。',
          description_en:
            'Label of tab items, which can be a string or a template, this summary will be displayed in the dropdown panel.',
        },
        {
          attribute: 'lvId',
          type: 'string | number',
          default: 'Generate ID',
          description: '唯一标识符 id 。',
          description_en: 'Unique identifier id.',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '禁用页签项。',
          description_en: 'Disabled tab items.',
        },
        {
          attribute: 'lvClosable',
          type: 'boolean',
          default: 'null',
          description:
            '页签项是否可关闭，当为 null 时，继承 lv-tabs 的配置。备注：页签项的配置优先级大于 lv-tabs 的配置。',
          description_en: `Whether tab items can be closed. If the value of lvClosable equals to null, configuration of lv-tabs will be inherited.
          Note: The configuration priority of tab items is higher than that of lv-tabs.`,
        },
        {
          attribute: 'lvTabClass',
          type: 'string',
          default: 'null',
          description: '页签自定义class',
          description_en: 'Tab custom class',
        },
      ],
      event: [],
    },
  ],
};
